<template>
  <div class="handle">
    <h2>订单查看管理</h2>
    <div class="handle-box">
      <div class="order-filter">
        <button :class="{ 'active': activeTab === 'all' }" @click="activeTab = 'all'">全部订单</button>
        <button :class="{ 'active': activeTab === 'unshipped' }" @click="activeTab = 'unshipped'">待发货</button>
        <button :class="{ 'active': activeTab === 'shipped' }" @click="activeTab = 'shipped'">已发货</button>
        <button :class="{ 'active': activeTab === 'completed' }" @click="activeTab = 'completed'">已完成</button>
        <button :class="{ 'active': activeTab === 'unpaid' }" @click="activeTab = 'unpaid'">退款中</button>
        <button :class="{ 'active': activeTab === 'canceled' }" @click="activeTab = 'canceled'">已取消</button>
      </div>
      <div class="search-container">
        <el-table :data="currentUsers" stripe ref="userTable">
          <el-table-column prop="OrderId" label="订单编号" width="150"></el-table-column>
          <el-table-column label="商品信息" width="180">
            <template slot-scope="scope">
              <img :src="scope.row.GoodsPicture" alt="" style="width: 60px; height: 60px;">
              <div class="right" style="position: absolute;left: 80px;top: 22px;">
                <p>{{ scope.row.GoodsNamegoods }}</p>
                <p>{{ scope.row.GoodsBrandgoods }}</p>

              </div>
            </template>
          </el-table-column>
          <el-table-column label="卖家信息" width="180">
            <template slot-scope="scope">
              <div>
                <p>{{ scope.row.BuyerName }}</p>
                <p>{{ scope.row.BuyerEmail }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="买家信息" width="180">
            <template slot-scope="scope">
              <div>
                <p>{{ scope.row.SellName }}</p>
                <p>{{ scope.row.SellEmail }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="GoodsCommand" label="配送方式"></el-table-column>
          <el-table-column prop="GoodsPrice" label="订单金额"></el-table-column>
          <el-table-column prop="GoodsCom" label="手续费(5%)"></el-table-column>
          <el-table-column prop="GoodsSta" label="订单状态" >
            <template slot-scope="scope">
              <span :style="{
                backgroundColor: getStateColor(scope.row.GoodsSta),
                color: getStateTextColor(scope.row.GoodsSta),
                padding: '3px 5px', borderRadius: '3px'
              }">
                {{ scope.row.GoodsSta }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="GoodsTime" label="订单创建时间" width="150">
            <template slot-scope="scope">
              <span>
                {{ formatTime(scope.row.GoodsTime) }}
              </span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[10, 20, 30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="totalUsers">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import jq from "jquery"
export default {
  data() {
    return {
      order: [],
      // 搜索关键词
      searchQuery: '',
      // 当前页码
      currentPage: 1,
      // 每页显示数量
      pageSize: 10,
      activeTab: 'all',
    };
  },
  computed: {
    currentUsers() {
      let filteredUsers = this.order.filter(user => {
        // 假设根据搜索关键词searchQuery过滤订单编号
        return user.OrderId.toString().includes(this.searchQuery);
      });

      // 根据activeTab过滤订单状态
      if (this.activeTab !== 'all') {
        const GoodsStaMap = {
          'unpaid': '退款中',
          'unshipped': '待发货',
          'shipped': '已发货',
          'completed': '已完成',
          'canceled': '已取消'
        };
        filteredUsers = filteredUsers.filter(user => user.GoodsSta === GoodsStaMap[this.activeTab]);
      }

      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return filteredUsers.slice(startIndex, endIndex);
    },
    totalUsers() {
      let total = this.order.length;
      if (this.activeTab !== 'all') {
        const GoodsStaMap = {
          'unpaid': '退款中',
          'unshipped': '待发货',
          'shipped': '已发货',
          'completed': '已完成',
          'canceled': '已取消'
        };
        total = this.order.filter(user => user.GoodsSta === GoodsStaMap[this.activeTab]).length;
      }
      return total;
    }
  },
  mounted() {
    this.goodsorder();
  },
  methods: {
    formatTime(timeStr) {
      if (!timeStr) return '';
      const date = new Date(timeStr);
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });
    },
    goodsorder() {
      let _this = this
      jq.ajax({
        type: "get",
        url: "http://127.0.0.1:3000/goodsorder",
        data: {
          value: this.add
        },
        success(res) {
          console.log('res', res)
          if (res.data == "") {
            return
          } else {
            _this.order = res.data
            console.log('_this.order', _this.order)
          }

        }
      })
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
    },
    // 状态返回对应的颜色
    getStateColor(GoodsSta) {
      switch (GoodsSta) {
        case '退款中':
          return '#E0F2F7';
        case '待发货':
          return '#E8F5E9';
        case '已发货':
          return '#FFE4E1';
        case '已完成':
          return '#FFFFE0';
        case '已取消':
          return '#F5F5F5';
        default:
          return 'transparent';
      }
    },
    getStateTextColor(GoodsSta) {
      switch (GoodsSta) {
        case '退款中':
          return '#0056b3';
        case '待发货':
          return '#006400';
        case '已发货':
          return '#8B0000';
        case '已完成':
          return '#B8860B';
        case '已取消':
          return '#333333';
        default:
          return 'transparent';
      }
    },
  },
};
</script>

<style lang="less" scoped>
.handle {
  padding: 70px 20px 20px 230px;
  background-color: #F9FAFB;
  width: 100%;

  .handle-box {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 1px solid #e9e8e8;
    background-color: white;
    position: relative;
    margin: 20px 10px;
    padding: 20px 40px;
    width: 99%;
  }

  h2 {
    display: block;
    visibility: visible;
    margin-left: 10px;
  }

  .order-filter {
    position: relative;
    margin: 10px 20px 20px -10px;
  }
}

.order-filter button {
  padding: 8px 20px;
  border-radius: 5px;
  border: none;
  font-size: 16px;
  background-color: rgb(255, 255, 255);
  cursor: pointer;
  margin-right: 20px;
  color: #797979;
}

.order-filter button.active {
  background-color: #2261eb;
  color: white;
}

.order-table {
  border-collapse: collapse;
  width: 100%;
}

.order-table th,
.order-table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.pagination button {
  padding: 6px 12px;
  margin-right: 5px;
  border: none;
  background-color: #f0f0f0;
  cursor: pointer;
}

.pagination button.active {
  background-color: #42b983;
  color: white;
}

.pagination button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.account {
  padding: 20px;
  width: 100%;
  background-color: #F9FAFB;

  h2 {
    display: block;
    visibility: visible;
    margin-left: 10px;
  }

  .search-container {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    background-color: white;
    position: relative;
    margin: 20px 10px;
    border-radius: 10px;
    border: 1px solid #e9e8e8;

    .el-input {
      margin: 20px;
      width: 400px;
    }

    .el-button {
      padding: 10px 15px;
      border-radius: 8px;

      img {
        position: relative;
        top: 2px;
        width: 15px;
        height: 15px;
      }
    }

    .add {
      background-color: #007bff;
      color: white;
      position: absolute;
      top: 18px;
      right: 20px;
    }
  }
}
</style>